<template>
    <div class="Adddepar">
        <div class="depar-cont">
            <form action="">
                <div class="div-input">
                    <label>部门名称</label>
              <input type="text" placeholder="控制在10个字、20个字符以内" v-model="tdepname">
                </div>
              <div class="div-input">
                  <label>部门负责人</label>
              <input type="text" placeholder="控制在5个字、10个字符以内" v-model="tdeptor" >
              </div>
              <div class="div-input">
                  <label>负责人电话</label>
              <input type="text" placeholder="控制在15个字符以内" v-model="tdeptel" >
              </div>
              <div class="div-input">
                  <label>负责人QQ</label>
              <input type="text" placeholder="控制在10个字节以内" v-model="tdepqq" >
              </div>
              <div class="div-input">
                  <label>负责人邮箱</label>
              <input type="text" placeholder="控制在50个字符以内" v-model="tdepemail" >
              </div>
              <div class="text">
              <span class="span">部门简介</span>
              <textarea rows="2" cols="100" placeholder="控制在500个汉字之内" v-model="tdepinfo">
              </textarea> 
              </div>
            </form>
            <br>
            <button class="add-but"  @click="subxiudep">修改部门</button>    
        </div>      
    </div>
    
</template>

<script>
import axios from 'axios'
import qs from 'qs'
export default {
     name:'Addamend',
     data(){
      return{
          tdepname:'',
          tdeptor:'',
          tdeptel:'',
          tdepqq:'',
          tdepemail:'',
          tdepinfo:''
      }
     },
     methods:{
       subxiudep:function () {
         var obj={
            tdepname:this.tdepname,
            tdeptor:this.tdeptor,
            tdeptel:this.tdeptel,
            tdepqq:this.tdepqq,
            tdepemail:this.tdepemail,
            tdepinfo:this.tdepinfo
         }
         axios.post("/xiudep",qs.stringify(obj)
            ).then((res)=>{
                  console.log(res)
            })

       }
     }

}
</script>
<style type="text/css">
.Adddepar{
    position: relative;
    height: 550px;
}
.depar-cont{
    width: 80%;
    margin-top: 18px;

}


input{
        border: 1px solid #999;
        width: 15rem;
        height: .7rem;
        background-color: #f3f3f3;
        margin-left: 4rem;
    }
textarea{
    border: 1px solid #999;
    background-color: #f3f3f3;
        margin-left: 4rem;
        width: 15rem;
        height: 1.8rem;
}
label{
    font-size: 18px;
    position: relative;
    top: .6rem;
    left: 1.6rem;

}
.text{
    margin-top: 25px;
}
.span{
    font-size: 18px;
    position: relative;
    top: 1rem;
    left: 1.6rem;
}
.add-but{
    background-color: #1cb394;
    height: .6rem;
    width: 1.6rem;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    position: relative;
    left: 4rem;
    top: .6rem;
}
</style>